<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<link rel="stylesheet" type="text/css" href="{f:uri.resource(path:'Css/style.css')}" />
<link rel="stylesheet" type="text/css" href="{f:uri.resource(path:'Css/zoom.css')}" />
<link rel="stylesheet" type="text/css" href="{f:uri.resource(path:'Css/jquery.bxslider.css')}" />
<link rel="stylesheet" type="text/css" href="{f:uri.resource(path:'Css/css.css')}" />
<script src="{f:uri.resource(path:'JavaScript/jquery.bxslider.js')}"></script>
<div class="xs-padding">
	<h3 class="c-title c-font-bold c-font-uppercase pull-left" style="margin-top: 0"><f:link.page pageUid="{settings.previewPid}" additionalParams="{uid : casecont1.uid}">{casetab.title}</f:link.page></h3>
	<f:if condition="{casetab.spare2}">
		<div class="text-center"><a class="pull-right albtn" href="{casetab.spare2}" target="_blank">访问案例网站</a></div>
	</f:if>
	<div style="clear: both;"></div>
	<div class="c-panel c-margin-b-30 clearfix">
		<!-- Baidu Button BEGIN -->
			<div class="bdsharebuttonbox" style="display: inline-block;float: left;"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
			<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
		<span style="margin-left: 20px;position: relative;top: 3px;">浏览量：{casetab.hits}</span>
		<!-- Baidu Button END -->
	</div>
	<div class="pull-right datetime">
		发布时间：{casetab.datetime->f:format.date(format: 'Y-m-d h:i')}
	</div>
	<div style="clear: both;"></div>
	<div style="position: relative;top: 3px;bottom: 30px;">标签：
		<f:for each="{casetab.tagname}" as="tag">
			<f:link.action action="nylist" arguments="{industry:'',product:'',labels:tag.uid}" >{tag.name}&nbsp;&nbsp;</f:link.action>
		</f:for>
	</div>
	<div class="imgnav" id="imgnav">
	    <div id="img">
	    	<f:for each="{allImage}" as="vimg">
		    	<f:link.typolink parameter="uploads/tx_casetab/{vimg}" target="_blank" class="a-img">
					<f:image src="uploads/tx_casetab/{vimg}" alt="" style="isplay: none;"></f:image>
				</f:link.typolink>
			</f:for>
	    </div>
	    <div id="cbtn">
	        <i class="picSildeLeft"><img src="{f:uri.resource(path:'img/picSlideLeft.gif')}"></i>
	        <i class="picSildeRight"><img src="{f:uri.resource(path:'img/picSlideRight.gif')}"></i>
	        <div id="cSlideUl">
	        <ul>
	        	<f:for each="{allImage}" as="vimg">
					<li><f:image src="uploads/tx_casetab/{vimg}" alt="" width="70c" height="70c"></f:image></li>
				</f:for>
	        </ul>
	        </div>
	    </div>
	</div>
	<div class="case_content">
		<div class="col-md-8 paddleft-md-0">
			<!-- 案例介绍 -->
			<div class="projectitem">
				<div class="projecttitle">应用场景：</div>
				<div class="projectcontent">{casetab.spare4}</div>
			</div>
			<div class="projectitem">
				<div class="projecttitle">应用效果：</div>
				<div class="projectcontent">{casetab.spare5}</div>
			</div>
			<div class="projectitem">
				<div class="projecttitle">技术要点：</div>
				<div class="projectcontent">{casetab.spare6}</div>
			</div>
			<div class="projectitem">
				<div class="projecttitle">项目介绍：</div>
				<div class="projectcontent">
					<f:if condition="{casetab.content}">
						<f:format.html>{casetab.content}</f:format.html><br/>
					</f:if>
					<f:if condition='{settings.templateLayout}==4'>
						<style>
							.case_content embed,iframe,video{
								height:500px;
								width:100%;
							}
							.new-content p{
								text-align: center;
							}
						</style>
					</f:if>
					<f:format.raw>{casetab.spare1}</f:format.raw>
					
					<script>
						var len = $("video").length;
						if(len>0){
							for(var i=0;i<len;i++){
								$("video").eq(i).removeAttr("preload");
								$("video").eq(i).width('100%');
								$("video").eq(i).height('100%');
							}
						}
					</script>
				</div>
			</div>
		</div>
		<div class="col-md-4 paddright-md-0" id="contactUS">
			<!-- 联系我们 -->
		</div>
		<div style="clear: both;"></div>
	</div>
<f:if condition="{casetabs}">
	<div class="recommend">
		<h4>相关案例</h4>
		<div class="bx-wrapper">
		    <div class="bx-viewport">
		        <div class="slider1">
		        	<f:for each="{casetabs}" as="cas">
			        	<div class="slide">
			            	<f:link.action pageUid="{settings.detailPid}" extensionName="casetab" pluginName="casetab" controller="Casetab" action="show" arguments="{casetab : cas}" >
				                <f:image src="uploads/tx_casetab/{cas.allimage.0}" height="400c" width="500c"></f:image>
				            </f:link.action>
				            <div class="recommend-title">
				            	<f:link.action pageUid="{settings.detailPid}" extensionName="casetab" pluginName="casetab" controller="Casetab" action="show" arguments="{casetab : cas}" >{cas.title}</f:link.action>
				            </div>
			            </div>
		        	</f:for>
		        </div>
		    </div>
		</div>
	</div>
	<script src="{f:uri.resource(path:'JavaScript/jquery.mousewheel.js')}"></script>
	<!-- <script src="{f:uri.resource(path:'JavaScript/jquery.imgZoom.js')}"></script> -->
	<script src="{f:uri.resource(path:'JavaScript/jquery.drag.js')}"></script>
	<script>
		var width = window.screen.width;
		if(width<= 500){
			$(".backbtn").remove();
			$('.mdimg').addClass('hide').removeClass('show');
			$('.smimg').addClass('show').removeClass('hide');
		}
	
		$(document).ready(function(){
	      	$('.slider1').bxSlider({
	        	slideWidth: 200,
	        	minSlides: 2,
	        	maxSlides: 6,
	        	slideMargin: 20,
	        	pager:false
	      	});
	    });

		$('img').on('mousedown',function (e) {
		    e.preventDefault()
		})

	</script>


</f:if>

	<script>
		$(document).ready(function(){                          
		    var index=0;
		    var length=$("#img img").length;
		    var i=1;
		    
		    //关键函数：通过控制i ，来显示图片
		    function showImg(i){
		        $("#img img")
		            .eq(i).parent('.a-img').stop(true,true).fadeIn(800)
		            .siblings(".a-img").hide();
		        $("#img img")
		            .eq(i).stop(true,true).fadeIn(800)
		            .siblings("img").hide();
		         $("#cbtn li")
		            .eq(i).addClass("hov")
		            .siblings().removeClass("hov");
		    }
		    
		    function slideNext(){
		        if(index >= 0 && index < length-1) {
		             ++index;
		             showImg(index);
		        }else{
					if(confirm("已经是最后一张了！")){
						if(length>5){
							showImg(0);
							index=0;
							aniPx=(length-5)*142+'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离
							$("#cSlideUl ul").animate({ "left": "+="+aniPx },200);
							i=1;
						}
					}
		            return false;
		        }
		        if(i<0 || i>length-5) {return false;}						  
		               $("#cSlideUl ul").animate({ "left": "-=142px" },200)
		               i++;
		    }
		     
		    function slideFront(){
		       if(index >= 1 ) {
		             --index;
		             showImg(index);
		        }
		        if(i<2 || i>length+5) {return false;}
		               $("#cSlideUl ul").animate({ "left": "+=142px" },200)
		               i--;
		    }	
		        $("#img img").eq(0).parent('.a-img').show();
		        $("#img img").eq(0).show();
		        $("#cbtn li").eq(0).addClass("hov");
		        $("#cbtn tt").each(function(e){
		            var str=(e+1)+"/"+length;
		            $(this).html(str)
		        })
		    
		        $(".picSildeRight,#next").click(function(){
		               slideNext();
		           })
		        $(".picSildeLeft,#front").click(function(){
		               slideFront();
		           })
		        $("#cbtn li").click(function(){
		            index  =  $("#cbtn li").index(this);
		            showImg(index);
		        });	
				$("#next,#front").hover(function(){
					$(this).children("a").fadeIn();
				},function(){
					$(this).children("a").fadeOut();
				})
		    })	
	</script>
<script>
	$(function(){
		if($(".contactborder").length>0){
			var clone = $('.contactborder').clone();
			$(clone).removeClass('hide');
			$("#contactUS").append(clone);
		}
	})
</script>
</html>